<!--轮播图组件-->
<template>
  <div class="aaaa">
    <el-carousel height="60vh" >
      <el-carousel-item v-for="(imageUrl, index) in imageArray" :key="index">
        <img
          :src="imageUrl.picture_url"
          :alt="'Image ' + (index + 1)"
          class="carousel-image"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import service from '@/utils/service';

export default {
  data() {
    return {
      imageArray: [],
    };
  },

  methods: {
    getRotationPicture() {
      return service.get("/pictures")
        .then(response => {
          if (response.data.code === 20041) {
            this.imageArray = response.data.data;
            console.log(response.data.data);
          }
        })
        .catch(error => {
          console.error("出错了", error);
        });
    }
  },
  mounted() {
    this.getRotationPicture();
  }
};
</script>

<style scoped>
.carousel-image {
  width: 100%; /* 图片宽度占据整个容器宽度 */
  height: 100%; /* 图片高度占据整个容器高度 */
  object-fit: cover; /* 等比例缩放图片，保持图片比例并填充满整个容器 */
  z-index: 5;
}



.aaaa >>> .el-carousel__arrow--left,
.aaaa >>> .el-carousel__arrow--right {
  width: 40px; /* 设置按钮的宽度 */
  height: 60px; /* 设置按钮的高度 */
  line-height: 40px; /* 设置按钮的行高，使文字垂直居中 */
  background-color: #0e10138a; /* 设置按钮的背景颜色 */
  color: #ffffff; /* 设置按钮的文字颜色 */
  border-radius: 8px; /* 设置按钮的圆角，使其呈现矩形形状 */
  font-size: 16px; /* 设置按钮的字体大小 */
}


</style>
